<template>
  <view class="order-logistics px-32 py-32 bg-white">
    <view class="flex">
      <image v-if="item.goods_spec_image" class="cover mr-28" :src="item.goods_spec_image" />
      <view class="flex column flex1">
        <view class="flex mt-8 f-28">
          <view class="title">订单编号：</view>
          <view>{{ item.orderNo }}</view>
        </view>
        <view class="flex mt-40 f-28">
          <view class="title">物流公司：</view>
          <view>{{ item.logisticsCompany }}</view>
        </view>
        <view class="flex mt-40 f-28">
          <view class="title">物流单号：</view>
          <view>{{ item.logisticsNo }}</view>
          <view class="copy-btn" @click.stop="copyExpressNo(item.logisticsNo)">复制</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  item: {}
});
// const copyExpressNo = (expressNo) => {
//   uni.authorize({
//     scope: 'scope.clipboard',
//     success: () => {
//       uni.setClipboardData({
//         data: expressNo,
//         success: () => {
//           uni.showToast({ title: '已复制物流单号', icon: 'none' });
//         },
//         fail: (err) => {
//           console.log('复制失败', err);
//           uni.showToast({ title: '复制失败', icon: 'none' });
//         }
//       });
//     },
//     fail: (err) => {
//       console.log('授权失败', err);
//       uni.showToast({ title: '请授权使用剪贴板功能', icon: 'none' });
//       // Optionally guide user to settings to enable permission
//       uni.openSetting();
//     }
//   });
// };
const copyExpressNo = (expressNo) => {
  uni.setClipboardData({
    data: expressNo,
    success: () => {
      uni.showToast({ title: '已复制物流单号', icon: 'none' });
    },
    fail: (err) => {
      console.log('复制失败', err);
      uni.showToast({ title: '复制失败', icon: 'none' });
    }
  });
};
</script>

<style lang="scss" scoped>
.order-logistics {
  .img {
    margin-right: 12rpx;
    width: 40rpx;
    height: 40rpx;
    vertical-align: text-bottom;
  }
  .cover {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
  }
  .title {
    color: #909193;
  }
  .copy-btn {
    margin-left: 20rpx;
    padding: 4rpx 16rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    color: #666;
    font-size: 24rpx;
  }
}
</style>
